<script  setup>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { ref, onMounted } from "vue";
let screenDom = ref();
var camera,scene,renderer,controls,ambientLight,directionalLight
onMounted(() => {
    scene = new THREE.Scene();
  // 创建相机
   camera = new THREE.PerspectiveCamera(
    135,
    screenDom.value.clientWidth / screenDom.value.clientHeight,
    0.1,
    100
  );
  camera.position.set(20, 30, 20); //important
  // 添加环境光
   ambientLight = new THREE.AmbientLight(0xffffff, 0.9);
  scene.add(ambientLight);
  //
   directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); //光源，color:灯光颜色，intensity:光照强度
  directionalLight.position.set(400, 200, 300);
  scene.add(directionalLight);
 
  // 创建渲染器
    renderer = new THREE.WebGLRenderer({ antialias: true });
 
  renderer.setClearColor(new THREE.Color("#157832"));
  renderer.setSize(screenDom.value.clientWidth, screenDom.value.clientHeight);
  renderer.domElement.addEventListener("click", onClick, false);
  screenDom.value.appendChild(renderer.domElement);
  //
   controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.enablePan = true;
  controls.enableZoom = true;
  controls.autoRotate = true;
  controls.autoRotateSpeed = 9;
 
  controls.update(); //重新设置轨道，相当于刷新
 
  // 添加模型
  const loader = new GLTFLoader();
  loader.load(
    "../../3D/甘雨/result.gltf",
    (gltf) => {
      // 加载成功后的回调函数
      const model = gltf.scene;
      model.scale.set(2500, 2500, 2500); // 缩放模型
      const box = new THREE.Box3().setFromObject(model);
      const center = box.getCenter(new THREE.Vector3());
      let axis = new THREE.Vector3(0, 1, 0);
      model.rotateOnAxis(axis, Math.PI * 2);
      model.position.sub(center); // 将模型位置移到原点处
      console.log(model);
      scene.add(model);
    },
    (xhr) => {
      // 加载过程中的回调函数
      console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
    },
    (error) => {
      // 加载失败的回调函数
      console.error("Failed to load model", error);
    }
  );
 
  // 渲染场景
  const render = () => {
    renderer.render(scene, camera);
    controls.update();
    requestAnimationFrame(render);
  };
  render();
});
function onClick() {
  event.preventDefault();
  const mouse = new THREE.Vector2();
  const rect = screenDom.value.getBoundingClientRect()
  mouse.x = ((event.clientX+rect.left) / window.innerWidth) * 2 - 1;
  mouse.y = -((event.clientY+rect.top)/ window.innerHeight) * 2 + 1;
  console.log("x:"+mouse.x,"y:"+mouse.y);
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(scene.children); //array
  if (intersects.length > 0) {
    var selectedObject = intersects[0];
    alert(selectedObject.object.name);
  }
}
</script>
<template>
  <div class="container">
    <h2>3D 模型</h2>
    <div class="canvas-container" ref="screenDom"></div>
  </div>
</template>
<style scoped>
.canvas-container {
  width: 800px;
  height: 400px;
}
body {
  overflow: hidden;
  margin: 0px;
}
</style>